<template>
	<view class="order-data-main">

		<div style="height: 10rpx;"></div>
		<div class="white-card-bg">
			<div>
				<p class="title-text" style="margin-left: 40rpx;">分销员数</p>
				<p class="content-text" style="margin-left: 40rpx;">0</p>
			</div>
			<div>
				<p class="title-text">下级分销员数</p>
				<p class="content-text">0</p>
			</div>
			<div>
				<p class="title-text" style="margin-right: 84rpx;">分销员销售额</p>
				<p class="content-text" style="margin-right: 84rpx;">0.00</p>
			</div>
		</div>

		<div class="white-card-bg">
			<div>
				<p class="title-text" style="margin-left: 40rpx;">成交客户数</p>
				<p class="content-text" style="margin-left: 40rpx;">0</p>
			</div>
			<div>
				<p class="title-text">支出佣金</p>
				<p class="content-text">0</p>
			</div>
			<div>
				<p class="title-text" style="margin-right: 84rpx;">商品分享引流</p>
				<p class="content-text" style="margin-right: 84rpx;">0</p>
			</div>
		</div>

		<div class="rankings">
			<div style="margin-left: 30rpx;display: flex;align-items: center;">
				<div style="width: 8rpx;height: 32rpx;background-color:#CFAE7D ;"></div>
				<span style="font-size: 32rpx;color: #333;margin-left: 20rpx;">排行榜</span>
			</div>

			<ul style="padding: 0;">
				<li>
					<div
						style="margin-left: 30rpx;display: flex;align-items: center;padding-top: 30rpx;justify-content: space-between;">
						<div style="display: flex;align-items: center;justify-content: center;">
							<span class="rankings-level">1</span>
							<div style="position: relative;margin-left: 36rpx;">
								<img id="level-flag" src="../../static/icon/ic_first_place.png" alt="" />
								<img id="user-avatar" src="https://cdn.uviewui.com/uview/album/1.jpg" alt="" />
							</div>
						</div>
						<span id="contribution-value">贡献值：22229</span>
					</div>
				</li>
				<li>
					<div
						style="margin-left: 30rpx;display: flex;align-items: center;padding-top: 30rpx;justify-content: space-between;">
						<div style="display: flex;align-items: center;justify-content: center;">
							<span class="rankings-level">2</span>
							<div style="position: relative;margin-left: 36rpx;">
								<img id="level-flag" src="../../static/icon/ic_first_place.png" alt="" />
								<img id="user-avatar" src="https://cdn.uviewui.com/uview/album/1.jpg" alt="" />
							</div>
						</div>
						<span id="contribution-value">贡献值：22229</span>
					</div>
				</li>

			</ul>
		</div>


	</view>
</template>

<script>
</script>

<style>
	.order-data-main {
		background-color: #FAFAFA;
		width: 100%;
		height: 100%;
	}

	li {
		list-style-type: none;
	}

	.white-card-bg {
		display: flex;
		background-color: white;
		padding-top: 40rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-bottom: 40rpx;
		border-radius: 20rpx;
		align-items: center;
		justify-content: space-between;
	}

	.title-text {

		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 500;
		font-size: 24rpx;
		color: #000000;
		opacity: 0.5;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}

	.content-text {
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: bold;
		font-size: 32rpx;
		color: #FF2928;
		margin-top: 8rpx;
		line-height: 46rpx;
		text-align: left;
		font-style: normal;
	}

	.data-update-time-line {
		width: 52rpx;
		height: 2rpx;
		border: 1rpx solid #979797;
		opacity: 0.5;
	}

	#data-update-time {
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 500;
		font-size: 24rpx;
		margin-left: 16rpx;
		margin-right: 16rpx;
		color: #000000;
		opacity: 0.2;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}

	.rankings {
		background-color: white;
		padding-top: 40rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-bottom: 40rpx;
		border-radius: 20rpx;

	}

	.rankings-level {
		font-family: Roboto, Roboto;
		font-weight: 400;
		font-size: 36rpx;
		color: #FEC601;
		line-height: 36rpx;
		text-align: justify;
		font-style: normal;
	}

	#level-flag {
		width: 72rpx;
		height: 60rpx;
		position: absolute;
		top: -12rpx;
		left: -6rpx;
		border-radius: 1000px;

	}

	#user-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 1000px;
	}

	#contribution-value {

		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #A1A1A1;
		line-height: 36rpx;
		margin-right: 30rpx;
		text-align: right;
		font-style: normal;
	}
</style>